<template>
  <div>
    <StepsWrapper>
      <a-steps :current="current" type="navigation" :style="stepStyle" size="small" @change="handleSelectSetp">
        <a-step v-for="(step, index) in steps" :key="step.name" :title="step.name" :status="checkStepStatus(index, step)" :disabled="step.disabled || index >= current"></a-step>
      </a-steps>
    </StepsWrapper>
    <div class="step-containers">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { StepsWrapper } from './style'

export default {
  name: 'steps',
  components: {
    StepsWrapper,
  },
  provide () {
    return {
      steps: this,
    }
  },
  props: {
    current: {
      type: Number,
      default: 0,
    },
  },
  data () {
    return {
      steps: [],
      stepStyle: {
        marginBottom: '60px',
        boxShadow: '0px -1px 0 0 #e8e8e8 inset',
      },
    }
  },
  beforeMount () {
    this.steps = []
  },
  methods: {
    checkStepStatus (index, step) {
      if (index === this.current) return 'process'
      else if (step.wait) return 'wait'
      else if (index < this.current) return 'finish'
      else return 'wait'
    },
    addItem (item) {
      this.steps.push(item)
    },
    handleSelectSetp (stepIndex) {
      const step = this.steps[stepIndex]
      if (step.disabled) return false
      this.$emit('change', stepIndex)
    },
  },
}
</script>

<style>

</style>
